<template>
  <div>
     <div class="article_title">
      <h1>文章分类</h1>
      <el-button type="primary" @click="toAdd"> 添加分类</el-button>
     </div>
     <!-- 添加的弹出层 -->
     <!-- vue3的弹出层 组件 用vmodel控制显示隐藏 -->
    <el-dialog :title="title" width="40%"  v-model="cateFlag">
        <el-form label-width="100px" :model="addObj"
          :rules="rules">
          <el-form-item label="分类名称" prop="cate_name">
              <el-input v-model="addObj.cate_name"></el-input>
          </el-form-item>
            <el-form-item label="分类别名" prop="cate_alias">
               <el-input v-model="addObj.cate_alias"></el-input>
          </el-form-item>
        </el-form>


            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="toAddArt">
                  确定
                </el-button>
            </template>
    </el-dialog>
     <!-- 数据表格-->

      <el-table :data="state.artCateList"  stripe style="width: 100%">
         <el-table-column type="index" label="序号"  />
         <el-table-column prop="cate_name" label="分类名称" />
         <el-table-column prop="cate_alias" label="分类别名"  />
        <el-table-column prop="name" label="操作">
          <template #default="scope" >
            <el-button round :icon="Edit" type="primary"
            @click="toEdit(scope.row)"
           >
                
              </el-button>
              <el-button 
               @click="toDel(scope.row.id)"  round :icon="Delete" type="danger">
           
              </el-button>
            </template>     
        </el-table-column>
      </el-table>
  </div>
</template>

<script setup lang="ts">
    import {ref,watch,reactive} from 'vue'
    import {addArtCate,artGetChannelsService,artDelChannelService,artEditChannelService} from '../../api/aritcle'
    import {Delete,Edit} from '@element-plus/icons-vue'
    let cateFlag=ref<boolean>(false);//弹出层的开关
     let title=ref<string>('添加分类')
    // 点击添加文章
      let toAdd=()=>{
        title.value="添加分类"
        cateFlag.value=true; //打开弹出层
      }
    // 添加需要的v-model的数据
    interface Iadd{
      cate_name:string,
      cate_alias:string,
      id?:number
    }
    let addObj=ref<Iadd>({
       cate_name:'', //分类名称
       cate_alias:''//分类别名
    })
      //给表单 做一个验证规则的数据
      let rules={
        cate_name:[{required:true,message:'分类名称必填',trigger:'blur'}],
        cate_alias:[{required:true,message:'分类别名必填',trigger:'blur'}],
      } 
      // 调用添加文章分类或编辑文章分类接口
      let toAddArt=async ()=>{

          if(editId.value){ //有编辑id

            addObj.value.id=editId.value;//编辑方法 多传id
            let editRes=await artEditChannelService(addObj.value)
            console.log(editRes)
            if(editRes.code==0){
                ElMessage.success("编辑成功")
              }
            // 清空编辑id
            editId.value=""
          }else{
             // 添加文章分类接口 
              let res=await addArtCate(addObj.value)
              console.log(res);
              if(res.code==0){
                ElMessage.success(res.message)
              }
          }   
          // 关闭遮罩
          cateFlag.value=false;
          // 增加成功  调用列表接口
          getArtlist();
      
      }
      // 监听遮罩控制的ref数据的变化
      watch(cateFlag,(newVal)=>{
          console.log("变化了")
          if(newVal==false){
            addObj.value.cate_name=''
            addObj.value.cate_alias=''
          }
      })

      // 2. 获取文章分类列表接口
      let state=reactive({
         artCateList:[]//文章分类列表
      })
      let getArtlist=async ()=>{
          let res=await artGetChannelsService()
          console.log(res)
          state.artCateList=res.data; //存储文章分类列表
      }
      getArtlist()

      // 删除接口
      let toDel= (id:any)=>{
        console.log(id,"--0---")
        console.log(ElMessageBox,"1`123")
          ElMessageBox.confirm(
              '您确认删除本条数据吗',
              'Warning',
              {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
              }
            )
          .then(async () => { 
            //用户点击的了确定 调用删除接口
                let res=await artDelChannelService(id)
              console.log(res)
              ElMessage.success('删除成功')
              getArtlist()
          })
             
        
      }
      // 点击编辑按钮回显---------------------
     
      let editId=ref<any>('')
      let toEdit=(row:any)=>{
          console.log(row.cate_name)
          cateFlag.value=true;
          // 点击编辑 回显操作 
          addObj.value.cate_name=row.cate_name;
          addObj.value.cate_alias=row.cate_alias;
          editId.value=row.id;//并存储编辑id
           title.value="编辑分类"
      }



</script>
<style lang="scss">
    .article_title{
      display:flex;
      justify-content:space-between;
    }
</style>